<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="box" v-cloak>
        <div class="nav">
            <div class="logo">
                <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYzE4ZDJlMmViMWExOTc4NzNjYTczOGFiNWZmMGRjNzEucG5n.png">
            </div>  
            <div class="navlist">
                <div>产品</div>
                <div>功能</div>
                <div>关于</div>
                <div>团队</div>
            </div>
        </div>
        <!--轮播图 -->
        <div>
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="(item,$index) in arr" :key="$index">
                  <div class="imgbox" :style="{backgroundImage:'url('+item.imgurl+')',backgroundSize:'100% 100%'}">
                     <div class="tabletext">
                        <div>{{item.text}}</div>
                        <div>{{item.content}}</div>
                     </div>
                  </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--  -->
        <div style="padding-top:100px;">   
            <titlebox title="产品介绍" inco="el-icon-discount" text="亲，本版本是最简单的单页式模板，不需要创建内页一般来说，
            只要半天就可以完成对这个模板的设定哦">
                <div style="padding: 60px 0;">
                    <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYjU5YzY3YmYxOTZhNDc1ODE5MWU0MmY3NjY3MGNlYmEuanBn.jpg">
                </div>
            </titlebox>
        </div>
        <div style="padding-top: 40px;">
            <titlebox title="模板功能" inco="el-icon-table-lamp" text="这些文字都是可以根据您的需要自行更改的，所以不要怕和您的需要不一样哦.
            图片的话都没有具体的大小要求，合适就好，开心就好">
                <div style="padding:0px 80px;overflow: hidden;">
                    <div class="module_list" v-for="i in 6">
                        <div class="taotu">
                           <div class="baopiao">
                             <div class="icn el-icon-attract"> </div>
                           </div>
                           <div class="baozi">
                           <h3>一页式模板</h3>
                           <p>起飞页不仅是一个方便快捷的构建网站</p>
                        </div>
                        </div>
                    </div>
                </div>
            </titlebox>
        </div>
        <!--  -->
        <div class="bootme">
            <div class="content_me">
                <titlebox style="color: #fff;" title="关于我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="text-align: center;color: #ff5100;font-size: 18px;">
                        起飞页自主建站平台
                    </div>
                </titlebox>
            </div>
        </div>
        <!--  -->

        <div class="moban">
            <titlebox style="color: #000;" title="我们的团队" inco="el-icon-s-release" text="介绍一下您的强大的团队吧。几行热情的自我介绍可以迅速的拉近您和访客的距离。">  </titlebox>
            
            <div class="lb">
                <div style="width: 100%;height: 100%;">
                    <div class="lb_1" style="width: 200%;height: 100%;">
                        <div v-for='i in 2' style="width: 50%;height: 100%;float: left;padding-left: 65px;box-sizing: border-box;">
                            <div v-for="i in arr1">
                                <!-- <img :src="i.img" alt=""> -->
                                <div style="width: 282px;height: 100%;margin-right: 15px;float: left;">
                                    <div class="img" style="width: 100%;height: 70%;">
                                        <img :src="i.img" alt="" style="width: 100%;height: 100%;">
                                    </div>
                                    <p>{{i.title}}</p>
                                    <p>{{i.a}}</p>
                                    <p>{{i.b}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="l" @click="l"><</div>
                <div id="r" @click="r">></div>
            </div>
        </div>
        <div class="chanpin">
            <div class="mengban">
            <titlebox style="color: #fff; padding-top: 40px; box-sizing: border-box;"  title="产品销售"  inco="el-icon-s-custom" text="很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据。">  </titlebox>
              <div class="baofu">
                <div class="baobao">      
                       <p>737</p>      
                 </div>
                <div class="baobao">         
                     <p>9257</p> 
                </div>
                <div class="baobao">                  
                       <p>68</p>                  
                </div>
                <div class="baobao">                  
                      <p>62</p>
                </div>
            </div>
               <div class="ulll">
                  <ul>
                    <li>发 布 版 本</li>
                    <li>部 署 客 户</li>
                    <li>荣 获 奖 项</li>
                    <li>用 户 好 评</li>
                   </ul>
               </div>
            </div>
        </div>
     <div class="xiangmu">
        <titlebox style="color: #000;" title="项目展示" inco="el-icon-s-home" text="一个没打过仗的军队很难有说服力，当然打了很多败仗的故事也不会增加任何说服力。所以说说您成功的项目经验吧，如果没有，也可以有哦。">  </titlebox>
         <div class="qiehuan">
            <div class="dasu_xmw" style="padding: 36px 0;">
                <div class="xx">
                    <div v-for="(i,$index) in arr3">
                        {{i.title}}
                    </div>
                </div>
                <div v-for="i in arr4">
                    <img :src="i.img_span" alt="" style="width: 286px;height: 170px;border-radius: 10px;float: left;margin-left: 10px;margin-top: 10px;">
                </div>
            </div>
         </div>
     </div>
      <div class="jiage">
         <div class="baobeijing">
            <titlebox style="color: #ffffff; padding-top: 40px; box-sizing: border-box;"  title="产品价格"  inco="el-icon-orange" text= "起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务">  </titlebox>
            <div class="juzhong">
               <div class="zuo">
                <h3>基础班</h3>
                <div class="jiujiu">
                    <a href="">￥99</a>
                    <span>/月</span>
                </div>
                <ul>
                    <li>流量5G/每月</li>
                    <li>空间1G自动</li>
                    <li>备份每日自动备份</li>
                    <li>技术支持邮件/QQ/电话</li>
                </ul>
                <div class="didi">
                    <button>联系客服</button>
                </div>
            </div>
            <div class="zuo">
                <h3 style="background-color: #ff5100;">高级版</h3>
                <div class="jiujiu">
                    <a href="">￥159</a>
                    <span>/月</span>
                </div>
                <ul>
                    <li>流量5G/每月</li>
                    <li>空间1G自动</li>
                    <li>备份每日自动备份</li>
                    <li>技术支持邮件/QQ/电话</li>
                </ul>
                <div class="didi">
                    <button style="background-color: #ff5100; border-color: #ff5100;">联系客服</button>
                </div>
            </div>

            <div class="zuo">
                <h3>终极版</h3>
                <div class="jiujiu">
                    <a href="">￥299</a>
                    <span>/月</span>
                </div>
                <ul>
                    <li>流量5G/每月</li>
                    <li>空间1G自动</li>
                    <li>备份每日自动备份</li>
                    <li>技术支持邮件/QQ/电话</li>
                </ul>
                <div class="didi">
                    <button>联系客服</button>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fuwu">
    <titlebox style="color: #000;" title="我们的服务" inco="el-icon-s-home" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。 "text="我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。" >  </titlebox>
    <div class="baoon">
        <div class="on1">
            <div class="el-icon-reading"> </div>
            <h4>服 务 介 绍</h4>
            <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
        </div>
        <div class="on1">
            <div class="el-icon-data-line"> </div>
            <h4>服 务 介 绍</h4>
            <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
        </div>
        <div class="on1">
            <div class="el-icon-data-board"> </div>
            <h4>服 务 介 绍</h4>
            <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
        </div>
        <div class="on1">
            <div class="el-icon-data-analysis"> </div>
            <h4>服 务 介 绍</h4>
            <p>応损捠捡换攳，攴朰朲朳枛朸桸桹桺奿妀。夲夳夵壱売壳圢圤圥圦圧！圩圪囡団囤囥咍咎，咐咑厺厼厽桻桼忝忞帄帇帉帊峢</p>
        </div>
    </div>
</div>
<div class="kehu">
  <div class="pp">
    <titlebox style="color: #fff;" title="客户评价" inco="el-icon-document-copy" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。 "text="我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。" >  </titlebox>
    <div class="bobo">
        <div class="penja_div">
            <div class="penja_box">
                <el-carousel indicator-position="outside">
                    <el-carousel-item v-for="(i,$index) in 2" :key="$index">
                      <div class="khw">
                        <div>
                            <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDcvOGY3OTQwZDBlZDFlYjM3NDIwNmMwMWEzMjA3ODY0MGItMTUweDE1MC5qcGc_p_p100_p_3D.jpg" alt="">
                        </div>
                        <div>
                            <div>起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。</div>
                            <div>—— 西安某英语培训机构, 代理</div>
                        </div>
                      </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
  </div>
</div>
<div class="footer"> 
<div class="footerbei">
    <div class="footleft">
        <titlebox style="color: #000;" title="联系我们" inco="el-icon-s-home" >  </titlebox>
        <input type="text">
        <input type="text">
        <input type="text">
       <button>发送</button>
    </div>
    <div class="footright">
        <titlebox style="color: #fff;" title="关注我们" inco="el-icon-s-home" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。"style="color:red">  </titlebox>
        <div class="baosi">
        <div class="el-icon-info icc"></div>
        <div class="el-icon-remove icc"></div>
        <div class="el-icon-circle-plus icc"></div>
        <div class="el-icon-success icc"></div>

    </div>
    </div>
  </div>
</div>
</div>
</body>
<script src="./vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./index.js"></script>
<!-- <script>
    export default {
        data() {
            return {
                src:[{url:"https://ccdn.goodq.top/caches/4ce61cd756c0c3467de0977d6849043b/aHR0cDovLzU3ZWEyMzYwMzY5YjUudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi8xNDk3OTMyMTk5NTk0OGExYTc5ZWVlYTYzNDctMjAweDIwMC05MC53ZWJw.webp",name:"孙阳",txt:"起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。"},{
                    url:"https://ccdn.goodq.top/caches/4ce61cd75I6c0c3467de0977d6849043b/aHR0cDovLzU3ZWEyMzYwMzY5YjUudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi8xNDk3OTMyMjAwNTk0OGExYTgxYTM0MzI0MTUtMjAweDIwMC05MC53ZWJw.webp",name:"孙阳",txt:"起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。"
                },{
                     url:"https://ccdn.goodq.top/caches/4ce61cd756c0c3467de0977d6849043b/aHR0cDovLzU3ZWEyMzYwMzY5YjUudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wNi8xNDk3OTMyMjAwNTk0OGExYTg3YjlhYjQ5NDUtMjAweDIwMC05MC53ZWJw.webp",name:"孙阳",txt:"起飞页是响应式建站专家，拥有全球最领先的屏幕界面智能识别技术，实现所有建站功能组件在多种屏幕下的完美呈现，真正让您的桌面/平板/手机3个网站同步生成，还可连接微信公众平台，创建您的微站。"
                }]
            }
        },
    </script> -->

<script>
    new Vue({
        el:"#box",
        data:{
            arr:[
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTgvMTAvMDNkYTM3MTQ2YjA1YzM5MTM1YWFjYWE4YTdlZDNkZDguanBn.jpg',
                    text:'做一个精彩的站点',
                    content:'为情怀而干杯，告别朴素的重复和一望无际的平庸'
                },
                {
                    imgurl:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzliN2NkY2QxNGRiMTRlOWNiNDk4ZjE3OTM4MTdkNjkuanBn.jpg',
                    text:'我在灯火阑珊处',
                    content:'起飞页是放飞梦想的地方，也是寻梦的地方'
                }
            ],
            arr1:[
                {
                    img:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmU3YTcyNzAzZjVjZDZjYzc3MmQ0N2E1Y2QyZGJjOTctNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    title:'彭 少宏',
                    a:'CEO总经理',
                    b:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
                },
                {
                    img:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTNkNDA0Mjg2MmVkNjE3Mzk0M2QwOTQ4M2M5NjM3NGMtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    title:'张 义栋',
                    a:'工程师',
                    b:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
                },
                {
                    img:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZmYxNDZkZjNiODBkMmE0M2FmNTZhYzY3Nzk3YWEwZDUtNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    title:'郭 思燕',
                    a:'客服代表',
                    b:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
                },
                {
                    img:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYTI2NzI2YzFlMDJhM2ZiNjRlNWM0MmM0MzEwZWFlMzktNDAweDQwMC5qcGc_p_p100_p_3D.jpg',
                    title:'梁 亚萍',
                    a:'客服代表',
                    b:'您可以双击这里或者点击编辑按钮来修改内容，您可以添加按钮图片等常用元素。您可以双击这里或者点击编辑按钮来修改内容。'
                }
            ],
            n:0,
            arr4:[
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNDgzNjYwMWNkOWZkNWEwMGI0ZTMzNWY2NmE1Yzg3NGYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzhmY2E0MjkyMzIzOWFhNGU3ZGIwNDBmMjc5ZDhmOTctNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvZjQwODQwY2Q3OTcxZDdkODQ5ZWRjYjI5NjRmODIwNmYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMzc5MDE2MTk1MDExZGQ3NzkxZGNmZjY3OTZkNDg2YzktNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvMWJhY2VjZjE5ZmNhOGIwNDllZTU1OGY1ZDFkYmVhNTEtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYmQ1ZmU4MGQ0ODZlZmQwYTE0MDA0MWZjMGZiNWEzMDktNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNzAzYTY3NzNmOTEwYmQwMzMwNGVkNTRjZjBmZDRlNGYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
                {
                    img_span:'https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvNjYxZDZlNzNhMWU5MWU3NDAzNzQ1MWQwOWExOTA4ODYtNTAweDMwMC5qcGc_p_p100_p_3D.jpg'
                },
            ],
            arr3:[
                {title:'活动策划|'},
                {title:'画册设计|'},
                {title:'电影宣传片制作|'},
            ],
            index:0,
            name:"no1"
        },
        methods: {
            l(){
                var oLb_1 = document.querySelector(".lb_1")
                this.n<=0?this.n=1:this.n--
                oLb_1.style.left = -this.n * 100 + '%'
                console.log(this.n)
            },
            r(){
                var oLb_1 = document.querySelector(".lb_1")
                this.n>=1?this.n=0:this.n++
                oLb_1.style.left = -this.n * 100 + '%'
                console.log(this.n)
            },
            bun(a){
                    if(a<this.index){  
                        this.name= 'no2'
                    }else{
                        this.name='no1'
                    }
                    this.index = a
                }
        },
    })
</script>
</html>